<template>
    <section class="information">
        <el-carousel height="495px" :interval="5000" vtrigger="click">
            <template v-if="bannerList!=0">
                <el-carousel-item v-for="(item,key) in bannerList" :key="key">
                    <router-link :to="{path:'/alumni/details',query:{id:item.id,type:item.type}}" class="banner" :style="{'background-image':item.pic?'url(' + BASE_URL+item.pic + ')':'url(' + require('../../../assets/images/error.png') + ')' }" tag="div">
                        <div class="cover">
                            <span>{{item.title}}</span>
                        </div>
                    </router-link>
                </el-carousel-item>
            </template>
            
            <template v-else>
                <el-carousel-item>
                    <div class="banner empty">
                        <span>暂时没有新闻数据</span>
                    </div>
                </el-carousel-item>
            </template>
        </el-carousel>
        <div class="news-list" v-if="newsList.data_sum!=0">
            <ul>
                <router-link :to="{path:'/alumni/details',query:{id:item.id,type:item.type}}" v-for="(item,key) in newsList.data" :key="key" tag="li" class="clear">
                    <div>
                        <img v-if="item.top" src="../../../assets/images/hot.png" height="14" width="11" alt="热门推荐" class="hot" />
                        <span :class="{title:true,fl:true,top:item.top}">{{item.title}}</span>
                        <span class="date fr">{{item.update_time.slice(0,10)}}</span>
                    </div>
                </router-link>
            </ul>
            <el-pagination
                background
                :small="true"
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="10"
                :total="newsList.data_sum">
            </el-pagination>
        </div>
        <div class="empty" v-if="newsList.data_sum==0">
            <img src="../../../assets/images/image02.png" height="46" width="39" alt="还没有资讯图标" />
            <p>还没有最新资讯~</p>
        </div>
    </section>
</template>

<script>
export default {
	data(){
		return {
            id:this.$route.query.id,    // 文章id
            bannerList:[],    // 存放轮播信息列表
            newsList:[],     // 存放新闻信息列表
		}
	},
    created(){
        // 获取轮播图信息
        this.getBanners();

        // 获取轮播图信息
        this.getNewsList();
    },
	methods:{
        // 获取轮播文章的请求
        getBanners(){
            let success = res => {
                this.bannerList = res.data.data;
            }
            this.$ajax({
                url: "/api/alumni/alumniNews",
                method: "get",
                params: {
                    type:1,    // 1：轮播文章；2：普通文章
                    page_index:1,
                    page_size:9,     // 产品要求0-9条
                    data_type:1,    // 0：没有分页 ； 1：有分页
                    order:'top'    // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                },
                func: { success: success }
            })
        },
        // 获取普通文章的请求
		getNewsList(page){
            let success = res => {
                this.newsList = res.data;
            }

            page = page || 1;

            this.$ajax({
                url: "/api/alumni/alumniNews",
                method: "get",
                params: {
                    type:2,    // 1：轮播文章；2：普通文章
                    page_index:page,    // 页码
                    page_size:10,     // 产品要求10条
                    data_type:1,    // 0：没有分页 ； 1：有分页
                    order:'top'    // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                },
                func: { success: success }
            })
        },
        handleCurrentChange(page){
            this.getNewsList(page)
        }
	}
}
</script>


<style lang="scss">
    #alumni{
        .news-container{
            .information{
                padding:31px 41px 0;
                width:880px;
                // height:842px;
                background: #fff;
                .el-carousel.el-carousel--horizontal{
                    .el-carousel__container{
                        &:hover{
                            cursor:pointer
                        }
                        .el-carousel__item{
                            .banner{
                                position:relative;
                                width:100%;
                                height:100%;
                                // background: #ccc;
                                background-size:cover;
                                background-repeat: no-repeat;
                                background-position: center center;
                                .cover{
                                    position:absolute;
                                    top:0;
                                    left:0;
                                    width:100%;
                                    height:100%;
                                    background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.02) 45%);
                                    span{
                                        position:absolute;
                                        bottom:42px;
                                        left:30px;
                                        line-height: 30px;
                                        font-weight: bold;
                                        font-size: 24px;
                                        color: #FFFFFF;
                                        letter-spacing: 0;
                                        text-shadow: 0 2px 0 rgba(0,0,0,0.50);
                                    }
                                }
                            }
                            .empty{
                                background-image: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.02) 45%),url("../../../assets/images/image01.png");
                                span{
                                    position:absolute;
                                    bottom:42px;
                                    left:30px;
                                    line-height: 30px;
                                    font-weight: bold;
                                    font-size: 24px;
                                    color: #FFFFFF;
                                    letter-spacing: 0;
                                    text-shadow: 0 2px 0 rgba(0,0,0,0.50);
                                }
                            }
                        }
                    }
                    .el-carousel__indicators.el-carousel__indicators--horizontal{
                        bottom:17px;
                        left:30px;
                        transform:translate(0,0);
                        .el-carousel__indicator.el-carousel__indicator--horizontal{
                            padding:0 9px 0 0;
                            .el-carousel__button{
                                width:10px;
                                height:10px;
                                border-radius:50%;
                            }
                        }

                    }
                }
                &>.news-list{
                    padding-top:40px;
                    padding-bottom:44px;
                    &>ul{
                        margin-bottom:40px;
                        li{
                            position:relative;
                            box-sizing:border-box;
                            margin-top:2px;
                            padding-bottom:2px;
                            padding-left:20px;
                            height:36px;
                            line-height:36px;
                            font-size: 14px;
                            color: #333333;
                            letter-spacing: 0;
                            border-bottom: 1px solid #EFEFEF;
                            img{
                                position:absolute;
                                top:13px;
                                left:0;
                            }
                            span{
                                &.title{
                                    width:740px;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                    &.top{
                                        font-weight:900;
                                        color: #000000;
                                    }
                                }                                
                                &.date{
                                    font-size: 12px;
                                    color: #999999;
                                }
                            }
                            &:hover{
                                cursor:pointer;
                            }
                        }
                    }
                    .el-pagination {
                        button{
                            width:30px;
                            height:30px;
                        }
                        .el-pager{
                            .number,.el-icon.more.el-icon-more{
                                min-width:30px;
                                height:30px;
                                line-height:30px;
                                font-size: 14px;
                                color: #606266;
                                letter-spacing: 0;
                                border-radius: 2px;
                                // background: #F0F2F5;
                                &.active{
                                    color: #FFFFFF;
                                    background: #1989FA;
                                }                                  
                            }
                            .el-icon-d-arrow-left,.el-icon-d-arrow-right{
                                height:30px;
                                line-height:30px;
                            }
                        }

                    }
                }
                &>.empty{
                    padding-top:128px;
                    padding-bottom:95px;
                    height:98px;
                    text-align:center;
                    p{
                        margin-top:31px;
                        height:21px;
                        font-size: 16px;
                        color: #A2B2BB;
                        letter-spacing: 0;
                    }
                }
            }
        }
    }
</style>